<template>
  <div class="tag-select-container">
    <div class="tree-container">
      <a-tree
        :expandedKeys="expandedKeys"
        :checkedKeys="checkedKeys"
        checkable
        :treeData="treeData"
        @check="handleTreeCheck"
        @expand="handleExpand"
        :auto-expand-parent="true"
      />
    </div>
    <div class="tags-container">
      <div class="tags-title">已选标签：</div>
      <div class="tags-list">
        <a-tag
          v-for="tag in selectedTags"
          :key="tag.key"
          :closable="true"
          @close="() => removeTag(tag)"
        >
          {{ tag.title }}
        </a-tag>
      </div>
    </div>
  </div>
</template>
<script>
import { sysDictTree } from "@/api/system/dict/data";
export default {
  data() {
    return {
      // 树形数据
      treeData: [],
      // 选中的节点keys
      checkedKeys: [],
      // 已选标签
      selectedTags: [],
      // 展开的节点
      expandedKeys: [],
    };
  },

  methods: {
    // 设置选中标签
    setCheckedTags(tags) {
      if (this.treeData.length === 0) {
        sysDictTree("customer_tag").then((response) => {
          this.treeData = response.data;
          if (!tags || tags.length === 0) {
            this.checkedKeys = [];
            this.selectedTags = [];
            this.expandedKeys = [];

            return;
          }
          this.selectedTags = tags;
          this.checkedKeys = tags.map((tag) => {
            return tag.key;
          });
          this.expandedKeys = tags
            .map((tag) => tag.parent)
            .filter((value, index, self) => self.indexOf(value) === index);
        });
      } else {
        this.selectedTags = tags;
        this.checkedKeys = tags.map((tag) => {
          return tag.key;
        });
        this.expandedKeys = tags
          .map((tag) => tag.parent)
          .filter((value, index, self) => self.indexOf(value) === index);
      }
    },
    // 处理树节点选中事件
    handleTreeCheck(checkedKeys, { checkedNodes }) {
      this.selectedTags = checkedNodes.reduce((result, node) => {
        const nodeData = node.data.props.dataRef;

        // 处理父节点（收集所有子节点）
        if (nodeData.children) {
          const childrenTags = nodeData.children.map((child) => ({
            key: child.key,
            title: child.title,
            parent: nodeData.parent,
          }));
          return result.concat(childrenTags);
        }

        // 处理叶子节点
        return result.concat({
          key: nodeData.key,
          title: nodeData.title,
          parent: nodeData.parent,
        });
      }, []);

      this.checkedKeys = checkedKeys;
      this.$emit("getTag", this.selectedTags);
    },
    // 删除标签
    removeTag(tag) {
      this.selectedTags = this.selectedTags.filter((t) => t.key !== tag.key);
      this.checkedKeys = this.checkedKeys.filter((key) => key !== tag.key);
      this.$emit("getTag", this.selectedTags);
    },
    handleExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
    },
  },
};
</script>

<style scoped>
.tag-select-container {
  display: flex;
  height: 400px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: hidden;
}

.tree-container {
  width: 260px;
  padding: 16px;
  border-right: 1px solid #e8e8e8;
  overflow-y: auto;
}

.tags-container {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.tags-title {
  margin-bottom: 12px;
  font-weight: 500;
}

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 调整树组件样式 */
.tree-container >>> .ant-tree {
  background: transparent;
}

.tree-container >>> .ant-tree-node-content-wrapper {
  padding: 0 4px;
}
</style>
